@import "variables.scss";
.align-c{text-align: center;}
.history-detail{
    .cont-item{
        position: relative;padding-top: 200px;z-index: 10;
        &:nth-child(2){    
            margin-top: -150px; padding-top:350px;     
            background: url(../images/history-bg1.jpg) no-repeat top center;   
            background-size: 100% auto;
            z-index: 8; 
        }
        &:nth-child(3){
            padding-top: 500px;margin-top: -100px;z-index: 7;
            background: url(../images/history-bg2.jpg) no-repeat top center;   
            background-size: 100% auto;         
        }
        &:nth-child(4){
            padding-top: 400px;padding-bottom: 200px;
            background: url(../images/history-bg3.jpg) no-repeat top center; 
            background-size: 100% auto;
        }
    }
    .inner{
        width: 70%;color: #333; font-size: 16px;  margin: 0 auto;
        line-height: 2;
        h3{
            font-size: 36px;font-weight: normal;padding-bottom: 15px;color: #000;text-indent: 32px;
        }
        h4{
            font-size: 20px;font-weight: 600;text-indent: 32px;
        }
        h5{
            font-size: 16px;text-indent: 32px;
        }
        p{
            padding:10px 0;text-indent: 32px;
        }
        .flex-end{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .w500{
           width: 37%;
        }
        .offset-100{    
            padding-bottom: 20px;      
            p{
                &:first-child{
                    padding-left: 500px;
                }
                &:nth-child(2){
                    padding-left:450px;
                }
            }
            h4{padding-left: 450px;}
        }     
    }
}

.year-axis-box{
    width: 78px;height:400px;background: #d7b890;border: 1px #fff solid;border-radius: 30px;z-index: 999;
    position: fixed;left: 30px;top: 50%;margin-top: -280px;
    padding: 30px 0;
    transition: all .275s linear;
    transform: translate3d(0,200%,0);
    &.show{
        transform: translate3d(0,0,0);
    }
    &:after{
        content: '';
        position: absolute;width: 1px;top:0;bottom: 0;background: $darkblue;left: 50%;
        z-index: 1;
    }
    .item{
        height: 25%;position: relative;z-index: 15;cursor: pointer;
        .txt{
            font-size: 16px;
            position: absolute;top: 50%;right: -50px;
            transform: translate(0,-50%);
        }
        &:after{
            content: '';
            width: 11px;height: 11px;border-radius: 50%;background: #d7b890;border:2px $darkblue solid;
            position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
            transition: all .275s $bezier-mazel;
        }
        &:hover,
        &.active{
            &:after{
                background: $darkblue;
            }         
            .txt{
                color: #0b0509;font-weight: bold;
            }
        }
    }
}

.detail-wrap{
    max-width: 1300px;min-height: 80vh; margin:100px auto 0 auto;color: #333;position: relative;
    padding: 0 25px;font-size:16px;
    h3{
        padding-bottom: 30px;
    }
    .cont-item{
        line-height: 1.9;margin-bottom:20px;
        h4{font-size: 20px;padding-bottom: 5px;}
        h5{font-size: 16px;}
        p{padding-bottom: 10px;}
    }
    .last-item{
        color: #787878;
    }
}

.bot_img_item{
    position: fixed;z-index: $base-z+20;
    opacity: 0;
    transition: all 1s $bezier-mazel;
    transform: translate3d(-100%,0,0);
    img{
        width: 100%;
    }
    &.active{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

.crane{
    width: 40%;
    left: -50px;bottom: 30px;
}
.boat{
    width: 30%;left:100px;bottom: 10px;
}
.sun{
    width: 54%;left: 14.45%;top: 16%;
    transform: translate3d(0,0,0);
}
.sun_bird{
    width: 80%;left: 0;top: 12%;
    transform: translate3d(0,0,0);
}
.detail-box{
    max-width:1300px;color: #14174f;margin-top: -100px; position: relative;
    padding-top: 180px;
    &:after{
        content: '';
        width: 2px;position: absolute;left: 0;top:0; bottom:0 ; background: #8d7754;
    }
    .inner-cont{
        position: relative;
        .crane2{
            position: absolute;top: 0;right: 130px;
        }
    }
    .cont-item{
        position: relative;padding-left: 40px;padding-right: 50px;padding-bottom: 40px;  font-size: 16px;
        h4{
            font-size: 22px;
        }
        h5{font-size: 18px;padding-top: 10px;}
        p{
           font-size: 18px;padding:4px 0;line-height: 2;
        }
        &:after{
            content: '';
            width: 16px;height: 16px;background: #8d7754;border-radius: 50%;
            position: absolute;left: -8px;top: 10px;
        }
    }
}

.leader-til{
   color: #fff;font-family: 'HYJINKAIJ';font-size: 48px;font-weight: normal;
   position: absolute;left:180px;top: 5%;
}

.leader-list-box{
    width: 71.875%; min-height: 80vh; margin:100px auto;padding-bottom:100px;
    .search-box{
        display: flex;
        justify-content: flex-end;
        .item{
            .input{
                width: 300px; padding:16px 20px 16px 60px;; height: 30px;line-height:30px; border: 1px $darkblue solid;
                background:url(../images/search-icon.png) no-repeat 15px 50%;border-radius: 20px;
                background-size: 24px 24px;font-size: 18px;color: $darkblue;
            }
        }
    }
    .leader-list{
        li{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border-top: 1px $darkblue solid;border-bottom: 1px $darkblue solid;
            padding: 50px 0;margin-bottom:8px;
            &:first-child{
                border-top: none;
            }
            .thumb{
                width: 26%;border-radius:8px;overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .info{
                width:68%;color: $darkblue;
                h4{
                    margin-bottom: 30px;
                    font-size: 30px;font-weight: normal;
                    .txt{
                        border-bottom: 1px $darkblue solid;padding-bottom: 5px;
                    }
                }
                p{
                    font-size: 18px;line-height: 1.9;
                }
            }
        }
    }
}

.name-axis-box{
    position: fixed;left: 40px;top: 50%; z-index: $base-z+200;
    transform: translateY(-45%);
    &:before,
    &:after{
        content: '';position: absolute;left: 7px; width: 1px;height: 30px;background: $darkblue
    }
    &:before{top: -30px}
    &:after{bottom: -30px;}

    .inner-scroll{   
        max-height: 70vh;
        padding-right: 30px;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .item{
        position: relative;height: 48px;line-height: 48px; z-index: 11;cursor: pointer;
        padding-left: 30px;
        .txt{
            font-size:18px;color: $darkblue;opacity: 0.9;
        }
        &:before{
            content: '';
            position: absolute;width: 1px;background: $darkblue;left: 7px;top: 0;bottom: 0;z-index: 10;
        }
        &:after{
            content: '';
            width: 11px;height: 11px;background: #f6e5c7;border: 2px $darkblue solid;border-radius: 50%;
            position: absolute;left:0;top: 50%;margin-top: -7px;z-index: 14;
        }
        &:hover,
        &.active{
            .txt{opacity: 1; font-weight: bold;}
            &:after{
                background: $darkblue;
            }
        }
    }
}

.history-swiper-box{
    position: fixed;left: 6%;right: 6%;top: 12%;bottom: 8%;z-index: $base-z+10;
    padding-left: 196px;
    &:after{
        content: '';
        position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;
        background: #fff;
        border: 5px #8b6903 solid;
        opacity: 0.6;
    }
    &.address-swiper-box{
        top: 19.8%;bottom: 15%;padding: 10px 5%;
    }
    &.alumni-swiper-box{
        padding: 50px 4%;
        &:after{
            opacity: 0.4;
        }
    }
}
.swiper-nav{  
    background: url(../images/history_swiper_nav.png) no-repeat;
    height: 648px;width: 162px;
    background-size: cover;
    position: absolute;z-index: 5;left: 30px;top: 50%;transform: translate3d(0,-50%,0);
    &:after{
        content: '';
        width: 2px;background: #8d7754; 
        position: absolute;right: -2px;top: -1000px;bottom: -1000px;
    }
    ul{
        padding-top: 160px;text-align: right;
        li{
            font-size: 36px;font-weight: bold;color: #fff;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;
            cursor: pointer;opacity: 0.7;
            &:hover,
            &.active{
                opacity: 1;
            }
        }
    }
}
.history-swiper-wrap{
    width: 100%;
    height: 100%;
    .h_slide{
        padding: 50px 60px 50px 60px;
        box-sizing: border-box;
    }
}
.inner-cont-swiper{
    box-sizing: border-box;
    height: 100%;
    padding-right: 30px;
    color: #333;
    h2,h3,h4{color: #14174f;}
    h2{font-size: 36px;padding-bottom: 15px;}
    h3{font-size: 28px;padding: 15px 0 10px 0;}
    h4{color: #14174f;font-size: 24px;padding: 15px 0 10px 0;}
    h5{
        font-size: 20px;
    }
    font-size: 18px;
    .swiper-slide{
        height: auto;
    }  
    p{
        padding: 8px 0;
    } 
    .img-item{
        padding: 20px 0 !important;
        &.img-w1256{
            max-width: 1256px;
            img{
                width: 100%;
            }
        }
        &.img-w1008{
            max-width: 1008px;
            img{
                width: 100%;
            }
        }
        &.img-group{
            overflow: hidden;
            img{
                margin: 12px 0;display: block;float: left;
            }
        }
    }
    .flex-cont{
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        padding-bottom: 20px;
        .xiaozh-img{
            padding-right: 40px;
        }
        .name{
            display: block;
            text-align: center;

        }
    }    
}
.swiper-container-vertical>.swiper-scrollbar{
    right: 0;
    .swiper-scrollbar-drag{
        background: rgba($color: #8b6903, $alpha: 0.6);
    }
}



.address-swiper{
    height: 100%;
    .swiper-slide{
        height: 100%;
        display: flex;
        align-items: center;
        width: auto;
        .inner{
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .address-img{
                width: 588px;
                img{
                    width: 100%;
                }
            }
            .info{
                padding-left: 30px;
                h3{
                    font-family: 'HYJINKAIJ';color: $main-color;font-size: 24px;line-height: 1.2;padding-bottom: 8px;
                }
                p{font-size: 20px;font-weight: 200;}
            }
        }
    }
}
.progressbar-pagination{
    position: absolute; height: 1px; left: 0;right: 0;bottom: -50px;
    background: #fff;
    &.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
        background: #fff;height: 5px;top: -2px;border-radius: 5px;
    }
}
.time_axis_nav{
    position: absolute; height: 1px; left: 0;right: -1px;bottom: -56px;z-index: $base-z;
    display: flex;
    justify-content: space-between;
    color: #fff;
    // &:after{
    //     content: '';
    //     width: 1px;height: 11px;background: #fff;
    //     position: absolute;right: 0;top: -16px;
    // }
    .item{
        width: 20%;text-align: center;position: relative;
        font-size: 20px;
        .txt{
            cursor: pointer;font-family: 'HYJINKAIJ';opacity: 0.8;
        }
        &:after{
            content: '';
            width: 1px;height: 11px;background: #fff;
            position: absolute;left: 50%;top: -16px;
        }
    }
}


@media screen and (max-width:1441px) {
    .history-detail{
        .inner{
            .w500{
               width:56%;
            }
            .offset-100{    
                padding-bottom: 0;      
                p{
                    &:first-child{
                        padding-left: 0;
                    }
                    &:nth-child(2){
                        padding-left:0;
                    }
                }
                h4{padding-left: 0;}
            }
        }
    }
    .detail-wrap{
        max-width: 1200px;
    }
    .detail-box{
        max-width: 980px;
    }
    .swiper-nav{  
        height: 464px;width: 116px; //width: 162px;
        background-size: cover;
        left: 76px;
        ul{
            padding-top: 120px;
            li{
                font-size: 30px;padding-top: 10px;padding-bottom: 10px;
            }
        }
    }
    .address-swiper{    
        .swiper-slide{
            .inner{
                .address-img{
                    width: 441px;
                    img{
                        width: 100%;
                    }
                }              
            }
        }
    }
}

@media screen and (max-width:1200px){
    .history-detail{
        width: 1200px;
    }
}